// 圆形icon按钮
<template>

    <button :disabled='disabled' :class='classname' class="btn-icon-circle"  @click='handleClick'>
        <i class="iconfont icon" :class='icon'></i>
    </button>

</template>

<script lang='ts'>

import {Component, Prop, Vue} from 'vue-property-decorator'
@Component({})
export default class btnIconCircle extends Vue{
    name:string = 'btnIconCircle'

    get classname (){
        return this.disabled ? 'disabled' : this.type; 
    }

    @Prop({
        default:false
    })
    disabled:boolean
    
    
    @Prop()
    icon:string

    /*
    ** 类型
    ** @params
            type: 'success', 'primary', 'info', 'danger', 'text'
    */
    @Prop({
        default: 'default'
    })
    type:string

    handleClick(){
        this.$emit('click')
    }
    
}


</script>

<style scoped lang='scss'>
.btn-icon-circle{
    display: inline-block;
    box-sizing: content-box;
    $size: _rem(16px);
    padding: _rem(4px);
    width: $size;
    height: $size;
    border-radius: 100%;
    line-height: $size;
    font-size: _rem(12px);
    outline: none;
    border: none;
}

.default{
    border: _rem(1px) solid $border_color;
    background: $block_bg_color;
}
.disabled{
    background: $disabled_color;
}

.primary{
    background: $main_color;
    color: $font_light_color;
}

.info{
    background: $info_color;
    color: $font_light_color;
}

.danger{
    background: $danger_color;
    color: $font_light_color;
}

.warning{
    background: $warning_color;
    color: $font_light_color;
}

.success{
    background: $success_color;
    color: $font_light_color;
}

.text{
    background: transparent;
}   

@each $type, $color in (default:$block_bg_color,primary:$primary_color, info:$info_color, success:$success_color, danger:$danger_color, disabled:$disabled_color, warning:$warning_color){
        .text.#{$type}{
            background: transparent;
            color: $color;
            transition: all $transition_time_q;
        }

        .text.#{$type}:hover{
            background: $color;
            @if $type != disabled {
                color: $font_light_color;
            }
        }
    
        .#{$type}{
            background: $color;
  
            @if $type != disabled {
                color: $font_light_color;
            }
        }
    } 

</style>